<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎来到聊天室</title>
    <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="application/javascript" src="/js/jquery.cookie.js"></script>
    <script type="application/javascript" src="/layui/layui.js"></script>
    <script type="application/javascript" src="/js/plugin.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="/layui/css/layui.css" media="all">
    <script>
    </script>
</head>

<body class="layui-layout-body">
<div id="chat" style="padding: 30px;">
    <div th:fragment="chat" class="layui-card layui-col-md7" th:each="m:${chatRoomRecordList}"
         style="background-color:cornsilk;" th:id="${m.getChat_user_id()}">
        <!-- 发送人昵称 -->
        <div class="layui-card-header" th:text="${m.getChat_user_name()}"></div>
        <hr>
        <!-- 发送的内容和消息 -->
        <div class="layui-card-body" th:text="${m.getChat_context()}"></div>
    </div>
</div>
<script th:inline="javascript">
    //刷新聊天内容
    function chat() {
        ready("#chat","/chat/room/record/list");
    }
    chat();
    setInterval(function (){
        ready("#chat","/chat/room/record/list");
    }, 5000);
    //根据滚动条位置刷新内容
    // setInterval(function (){
    //     const chat = document.getElementById("chat");
    //     let clientHeight = document.scrollingElement.clientHeight;
    //     //如果滚动条在底部
    //     console.log("scrollHeight:"+chat.scrollHeight
    //         +"。。。scrollTop:"+chat.scrollTop + "。。。。clientHeight:"+clientHeight)
    //     if(chat.scrollHeight - chat.parentElement.scrollTop - clientHeight < 10 ){
    //         //保证最新消息在最底
    //         location.href="#"+chat.lastElementChild.id;
    //     }
    // }, 500);
</script>
</body>

</html>